// components/Scenicname.js
import React, { useState, useEffect } from'react';
import styles from '../css/scenicname.module.css';
import { ImageUploader, Toast } from 'antd-mobile';
import leftt from '../assets/left.png';
import hourse3 from '../assets/hourse3.png';
import imgs from '../assets/imgs.png';
import imgstwo from '../assets/imgstwo.png';
import starEmpty from '../assets/nullstar.png'; // 空心星星（默认）
import starFilled from '../assets/redstar.png'; // 实心星星（选中）
import { useNavigate } from'react-router-dom';
import { uploadFile, addScenicComment, addTravelExperience } from '../api/scenicname.js';

/**
 * 景区评价页面组件
 * 用于用户对景区进行评分、添加文字描述和上传图片/视频
 */
const Scenicname = () => {
    const navigate = useNavigate();
    
    // 用户信息和会话状态
    const [userid, setUserid] = useState(sessionStorage.getItem("userid"));
    const [comentid, setComentid] = useState(sessionStorage.getItem("comentid"));
    const [game, setGame] = useState(JSON.parse(sessionStorage.getItem("game")) || {});
    const [star, setStar] = useState(sessionStorage.getItem("status"));
    
    // 评价内容状态
    const [sta, setSta] = useState(0); // 当前选中的星星数量（0~5）
    const [areaValue, setAreaValue] = useState(''); // 评价文本内容
    
    // 文件上传状态
    const [fileList1, setFileList1] = useState([{ url: imgs }]); // 第一张图片上传，初始显示默认图片
    const [fileList2, setFileList2] = useState([{ url: imgstwo }]); // 第二张图片/视频上传，初始显示默认图片
    const [imgUrl, setImgUrl] = useState(""); // 主图URL
    const [isVideoSelected, setIsVideoSelected] = useState(false); // 是否选择了视频
    
    // UI状态
    const [loading, setLoading] = useState(false); // 提交按钮加载状态

    // 组件挂载时打印关键数据
    useEffect(() => {
        console.log(userid, "账号id");
        console.log(comentid, "游记id");
        console.log(game, "游记数据");
        console.log(star);
    }, [userid, comentid, game, star]);

    // 返回上一页
    const left = () => {
        window.history.back(-1);
    };

    // 返回首页
    const first = () => {
        navigate("/home");
    };

    /**
     * 处理星级评分变化
     * @param {number} value - 选中的星级（1-5）
     */
    const handleStarClick = (value) => {
        setSta(value);
        console.log("当前评分:", value);
    };

    /**
     * 处理文件上传
     * @param {File} file - 选择的文件
     * @param {boolean} isFirst - 是否是第一张图片（true:图片，false:视频）
     * @returns {Promise<Object>} - 上传成功后的文件信息
     */
     // 文件上传处理
    const handleUpload = async (file, isFirst) => {
        try {
            const fileExtension = file.name.split('.').pop().toLowerCase();
            
            if (isFirst && /^(jpg|jpeg|png|gif)$/.test(fileExtension)) {
                const url = await uploadFile(file, isFirst ? 108 : userid);
                isFirst ? setFileList1([{ url }]) : setFileList2([{ url }]);
                return { url };
            } 
            else if (!isFirst && /^(mp4|avi|mkv|mov)$/.test(fileExtension)) {
                const url = await uploadFile(file, userid);
                setFileList2([{ url }]);
                setIsVideoSelected(true);
                return { url };
            } 
            else {
                Toast.info(isFirst ? '请上传图片文件' : '请上传视频文件');
                throw new Error('文件类型错误');
            }
        } catch (error) {
            console.error('上传失败:', error);
            throw error;
        }
    };

    // 触发文件选择
    const triggerFileInput = (isFirst) => {
        document.getElementById(isFirst ? 'input1' : 'input2').click();
    };
  // 文件选择变化处理
    const handleFileChange = (e, isFirst) => {
        const file = e.target.files[0];
        file && handleUpload(file, isFirst);
        e.target.value = '';
    };

    /**
     * 提交评价内容
     */
    const send = async () => {
        // 获取上传的文件URL
        const singleFileUrl1 = fileList1[0]?.url !== imgs ? fileList1[0]?.url : null;
        const singleFileUrl2 = fileList2[0]?.url !== imgstwo ? fileList2[0]?.url : null;

        // 验证提交条件
        if ((sta !== 0 || areaValue !== "") && (singleFileUrl1 || singleFileUrl2)) {
            try {
                setLoading(true); // 显示加载状态
                
                // 根据不同类型提交不同API
                if (star === "1") {
                    const response = await addScenicComment({
                        intri_id: game.id,
                        score: sta,
                        content: areaValue,
                        user_id: userid,
                        img: singleFileUrl1,
                        video: singleFileUrl2,
                        pid: 0,
                    });
                    
                    if (response.code === 1) {
                        // 显示成功提示并跳转
                        document.querySelector(`.${styles['hint-big']}`).style.display = 'block';
                        setTimeout(() => {
                            navigate("/strategy");
                        }, 2000);
                    }
                } else if (star === "2") {
                    const response = await addTravelExperience({
                        user_id: game.user_id,
                        intr_id: game.id,
                        content: areaValue,
                        pid: 0,
                        img: singleFileUrl1,
                        video: singleFileUrl2
                    });
                    
                    if (response.code === 1) {
                        // 显示成功提示
                        document.querySelector(`.${styles['hint-big']}`).style.display = 'block';
                        setTimeout(() => {
                            document.querySelector(`.${styles['hint-big']}`).style.display = 'none';
                        }, 2000);
                    }
                }
            } catch (error) {
                console.error('提交失败:', error);
            } finally {
                setLoading(false); // 隐藏加载状态
            }
        } else {
            // 显示完善信息提示
            document.querySelector(`.${styles['hint-bigs']}`).style.display = 'block';
            setTimeout(() => {
                document.querySelector(`.${styles['hint-bigs']}`).style.display = 'none';
            }, 2000);
        }
    };

    return (
        <div>
            {/* 成功提示信息 */}
            <div className={styles['hint-big']}>
                <div className={styles['hint']}>
                    <div className={styles['hint-one']}>发布成功！</div>
                </div>
            </div>
            {/* 完善信息提示 */}
            <div className={styles['hint-bigs']}>
                <div className={styles['hints']}>
                    <div className={styles['hint-one']}>完善信息！</div>
                </div>
            </div>

            {/* 顶部导航栏 */}
            <div className={styles['top']}>
                <div style={{ display: 'flex', alignItems: 'center', whiteSpace: 'nowrap', width: '50%', justifyContent: 'space-between' }}>
                    <div className={styles.left}>
                        <img src={leftt} alt="" onClick={left} />
                        <div className={styles['line']}></div>
                        <img src={hourse3} alt="" onClick={first} />
                    </div>
                </div>
                <p style={{marginLeft:'-5px'}}>景区名称</p>
            </div>

            {/* 星级评分区域 */}
            <div className={styles['stared']}>
                <div style={{ fontWeight: '600', fontSize: "20px" }}>评分</div>
                <div className={styles['start']}>
                    {[1, 2, 3, 4, 5].map((value) => (
                        <img
                            key={value}
                            className={styles['starting']}
                            src={value <= sta ? starFilled : starEmpty}
                            alt=""
                            onClick={() => handleStarClick(value)}
                        />
                    ))}
                </div>
            </div>

            {/* 文本输入区域 */}
            <div className={styles['inputs-content']}>
                <textarea
                    placeholder="你可以从邂逅动物,游玩项目,交通等方面进行评价,晒图分享你在动物世界的探索旅程"
                    value={areaValue}
                    onChange={(e) => setAreaValue(e.target.value)}
                />
                <span>在评价15字，可获得10经验</span>
            </div>

            {/* 图片/视频上传区域 */}
            <div className={styles['two-img']} style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div style={{ width: '48%', marginLeft: '20px' }}>
                    {/* 图片上传区域 */}
                    <div className={styles['custom-uploader']} onClick={() => triggerFileInput(true)}>
                        <img
                            src={fileList1[0]?.url}
                            alt="上传图片"
                            style={{ width: '160px', height: '75px', objectFit: 'cover', borderRadius: '10px', marginTop: '1px' }}
                        />
                    </div>
                    <input
                        type="file"
                        id="input1"
                        style={{ display: 'none' }}
                        onChange={(e) => handleFileChange(e, true)}
                        accept="image/*"
                    />
                </div>
                <div style={{ width: '48%' }}>
                    {/* 视频上传区域 */}
                    <div className={styles['custom-uploader']} onClick={() => triggerFileInput(false)}>
                        {isVideoSelected ? (
                            <video
                                src={fileList2[0]?.url}
                                poster={imgstwo}
                                alt="上传视频"
                                style={{ width: '156px', height: '79px', objectFit: 'cover', borderRadius: '10px' }}
                                controls
                            ></video>
                        ) : (
                            <img
                                src={fileList2[0]?.url}
                                alt="上传视频封面"
                                style={{ width: '156px', height: '79px', objectFit: 'cover', borderRadius: '10px' }}
                            />
                        )}
                    </div>
                    <input
                        type="file"
                        id="input2"
                        style={{ display: 'none' }}
                        onChange={(e) => handleFileChange(e, false)}
                        accept="video/*"
                    />
                </div>
            </div>

            {/* 提交按钮 */}
            <div className={styles['bot']}>
                <p onClick={send} disabled={loading}>
                    {loading ? '发布中...' : '发表'}
                </p>
            </div>
        </div>
    );
};

export default Scenicname;    